<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="baidu-site-verification" content="codeva-y83H31FH2r" />
  <meta name="sogou_site_verification" content="eMq1nsRhwX" />
  <link rel="icon" href="favicon.ico">
  <script src="js/vue.js"></script>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" type="text/css" href="css/element.css">
  <script src="js/source.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/element.js"></script>
  <title>lingxi产业数据</title>
  <meta name="Keywords" content="lingxi产业数据">
  <meta name="Description" content="lingxi产业数据">
  <style>
    #echarts {
      width: 100vw;
      height: 100vh;
    }

    .select-box {
      position: fixed;
      left: 30px;
      top: 30px;
    }
  </style>
</head>

<body>
  <div id="index">
    <div id="echarts"></div>
    <div class="select-box">
      <el-select v-model="industryId" @change="setEchart()" size="mini">
        <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-radio-group v-model="isExpand" @change="setEchart()" size="mini">
        <el-radio-button label="1">默认展开</el-radio-button>
        <el-radio-button label="0">全部展开</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</body>
<script>
  let vm = new Vue({
    el: "#index",
    data: {
      myChart: null,
      isExpand: "1",
      industryId: "gaoduanzhuangbeizhizao",
      selectList: [{
          "value": "gaoduanzhuangbeizhizao",
          "label": "高端装备制造",
        },
        {
          "value": "xinnengyuan",
          "label": "新能源",
        },
        {
          "value": "jingxihuagong",
          "label": "精细化工",
        },
        {
          "value": "shuzi",
          "label": "数字",
        },
        {
          "value": "yimiao",
          "label": "疫苗",
        },
        {
          "value": "zhinengjiadian",
          "label": "智能家电",
        },
        {
          "value": "qiche",
          "label": "汽车"
        },
        {
          "value": "guidaojiaotongzhuangbei",
          "label": "轨道交通装备",
        },
        {
          "value": "gongyejiqiren",
          "label": "工业机器人",
        },
        {
          "value": "fuwujiqiren",
          "label": "服务机器人",
        },
        {
          "value": "xitu",
          "label": "稀土",
        },
        {
          "value": "chuneng",
          "label": "储能"
        },
        {
          "value": "xinnengyuanqiche",
          "label": "新能源汽车"
        },
        {
          "value": "gongyehulianwang",
          "label": "工业互联网"
        },
        {
          "value": "shengwuyiyao",
          "label": "生物医药"
        }
      ]
    },
    mounted() {
      this.myChart = echarts.init(document.getElementById('echarts'));
      console.log();
      this.setEchart();
    },
    methods: {

      setEchart() {
        console.log("000");
        var option = {
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          series: [{
            type: 'tree',
            data: source[this.industryId] || [],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 12
            },
            roam: true,
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            initialTreeDepth: this.isExpand == '1' ? 2 : -1, // 展开层级, null 表示全展开
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }]
        }
        this.myChart.setOption(option)
      }
    }
  })
</script>

</html>